<template>
  <div class="shops">
    <div class="box">
      <div class="xiaomo"><img src="https://cdn3.axureshop.com/demo/1525603/images/%E9%80%89%E6%8B%A9%E5%BA%97%E9%93%BA/u1066.png" /><span>小默外卖商家中心</span></div>
      <div class="xiaomo-a">
        请选择店铺开始营业
      </div>
      <div class="shops-box">
        <div class="store" v-for="item in data" :key="item.id"  @click="dianj(item.id)">
          <div class="benji"  v-show="item.show">本机</div>
          <img :src=item.url />
          <div class="store-message">
            <div class="shop-name">{{item.name}}</div>
            <div class="phone">接单:{{item.phone}}</div>
          </div>
        </div>
      </div>
      <div class="prompt">一台手机同时只能支持一个店铺在线营业</div>
    </div>
  </div>
</template>
<script>
import { mapActions,mapGetters,mapMutations } from 'vuex';
export default {
  name: 'HomeShops',
  data () {
    return {
      data: []
    }
  },
  methods: {
    ...mapActions(['page/dl']),
    ...mapGetters(['page/show']),
    ...mapMutations(['page/change']),
    dianj (n) {
      this[('page/change')](n)
      this.$router.push('/tar')
    },
    test () {
     this[('page/dl')]().then((res) => {
       console.log("获取成功")
      this.shop()
      console.log(res)
    }).catch((err) => {
      console.log("获取失败")
      this.shop()
      console.log(err)
    })
    },
    shop () {
      console.log(this.data)
      this.data = this[('page/show')]()
      
    }
  },
  created(){
    this.test()
  // this.shop()
  }
  
}
</script>
<style scoped>

.shops {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
}
*{
  font-size: 15px;
}
*{
  margin: 0;
  padding: 0;
}
.box {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
.xiaomo{
  position: relative;
  top: 50px;
}
.xiaomo > img{
  width: 23px;
  height: 14px;
}
.xiaomo-a{
  position: relative;
  top: 70px;
  font-size: 20px;
}
.shops-box{
  position: relative;
  top: 90px;
}
.store{
  background-color: #ffffff;
  display: flex;
  height: 95px;
  width: 100%;
  position: relative;
  align-items: center;

    border-radius: 10px;
}
.store > img{
  width: 60px;
  height: 60px;
  margin: 0 18px;
}
.store-message{
  height: 100%;
  display: flex;
  flex-direction: column;
justify-content: space-evenly;

}
.shop-name{
width: 200px;
font-size:15 ;
}
.phone{
  color: #5e5e5e;
  font-size: 13;
}
.benji{
  position: absolute;
  width: 35px;
  height:20px;
  background-color: #fca190;
  color: #ffffff;
  font-size: 12px;
  border-radius: 0 10px 0 10px;
  text-align: center;
top: 0;
right: 0;
}
.prompt{

position: absolute;
top: 85vh;
font-size: 13px;
color: #999999;
width: 100%;
text-align: center;
}

.store{
  margin: 10px 0;
}
</style>